<template>
<div>
  菜单管理
  <el-button v-waves >
    新增菜单
  </el-button>
  <el-table
      :data="tableData"
      style="width: 100%; ">
    <el-table-column
        type="index"
        label="序号"
        width="60">
    </el-table-column>
    <el-table-column
        prop="pid"
        label="菜单名称"
        width="180">
    </el-table-column>
    <el-table-column
        prop="level"
        label="菜单编码">
    </el-table-column>
    <el-table-column
        prop="created"
        label="类型">
    </el-table-column>
    <el-table-column
        prop="address"
        label="图标">
    </el-table-column>
    <el-table-column
        prop="address"
        label="菜单url">
    </el-table-column>
    <el-table-column
        prop="address"
        label="排序">
    </el-table-column>
    <el-table-column
        prop="address"
        label="状态">
    </el-table-column>
    <el-table-column label="操作" align="center" width="250px" class-name="small-padding fixed-width">
      <template slot-scope="{row}">
        <el-button v-waves v-permission="'role_edit'"  type="primary" size="mini" @click="handleUpdate(row)">
          修改
        </el-button>
        <el-button v-waves v-permission="'role_delete'" size="mini" type="danger" @click="handleDelete(row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      small
      layout="prev, pager, next"
      :current-page="page"
      :total="this.total"
      @current-change="handlePage">
  </el-pagination>
</div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }
      ],
      page:1,
      pageSize:5,
      total:0
    }
  },
  methods:{
    menuList(page,pageSize){
      let url='http://localhost:9085/permission/list'
      console.log(url)
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url,{
            params:{
              page,pageSize
            }
          }).then(res=>{
        let responseBody=res.data;
        console.log(responseBody)
        this.tableData=responseBody.data.list;
        this.total=responseBody.data.total
      })
    },
    handlePage(val){
      this.menuList(val,this.pageSize);
    }
  },mounted() {
    this.menuList(1,5);
  }
}
</script>

<style scoped>

</style>